<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器</title>
</head>

<body>
    <script>
        /* 
            定时器的本质是， 就是在指定时间后，将函数添加到消息队列中。  
            setInterval()  每间隔一段时间就将函数添加到消息队列中，但是如果函数执行的速度较慢，它是无法确保每次执行的间隔的时间都是一样的。
            
            所以用setTimeout()来模拟setInterval()的功能
        
        */


    /* 
        console.time("setTimeout间隔")
        const timer = setTimeout(() => {
            console.timeEnd("setTimeout间隔")
            console.log(`setTimeout定时器执行了`)
        }, 3000)    //这里的3秒的意思是，3秒后将回调函数添加到消息队列中


        // 使程序停止六秒
        const begin = Date.now()
        while (Date.now() - begin < 6000) { }
    */


    /* 
        console.time("setInterval间隔")
        const timer2 = setInterval(() => {
            console.timeEnd("setInterval间隔")
            console.log(`setInterval定时器执行了`)
            const begin = Date.now()
            while (Date.now() - begin < 4000) {
                console.log(`setInterval定时器执行了`)
            }
            console.time("setInterval间隔")
        }, 3000)     // 每隔3秒将回调函数添加到消息队列一次
    */

        // 确保每次执行回调函数都有相同的间隔
        console.time("间隔")
        const timer3 = setTimeout(callBack = () => {
        console.timeEnd("间隔")
                console.log("函数执行了")
                console.time("间隔")
                setTimeout(callBack,3000)       // 在setTimeout的回调函数的最后，在调用一个setTimeout
        }, 3000)

    </script>
</body>

</html>